<template>
  <div class="box">
    <el-date-picker
      v-model="value1"
      type="daterange"
      align="left"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      class="filter-item pickertime"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      :clearable="false"
      :picker-options="pickerOptions2"
    />
    <el-input v-model="listQuery.domain" placeholder="请输入域名查询是否拉起过" style="width: 220px;" class="filter-item" @keyup.enter.native="getList" />
    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
      搜索
    </el-button>
  </div>
</template>

<script>
import { fetchSearch } from '@/api/cnzz/cnzzqudao'
import { Message } from 'element-ui'
import { parseTime } from '@/utils'

export default {
  name: 'Deeplink',
  data() {
    return {
      listQuery: {
        domain: '',
        start_tm: '',
        end_tm: ''
      },
      value1: [parseTime(new Date().getTime() - 3600 * 1000 * 24, '{y}-{m}-{d}'), parseTime(new Date().getTime() - 3600 * 1000 * 24, '{y}-{m}-{d}')],
      pickerOptions2: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime())
            start.setTime(start.getTime())
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '前天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 2)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate(time) {
          return time.getTime() < new Date().getTime() - 3600 * 1000 * 24 * 3 || time.getTime() > Date.now()
        }
      }
    }
  },
  methods: {
    getList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.value1) {
        this.listQuery.start_tm = this.value1[0]
        this.listQuery.end_tm = this.value1[1]
      } else {
        this.listQuery.start_tm = ''
        this.listQuery.end_tm = ''
      }
      fetchSearch(this.listQuery).then(response => {
        loading.close()
        if (response.code === 1) {
          Message({
            message: '共查询到' + response.total + '条记录',
            type: 'success',
            duration: 3000,
            showClose: true
          })
        } else {
          Message({
            message: response.msg || '查询失败',
            type: 'error',
            duration: 2000
          })
        }
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.box{
  margin: 200px auto;
  text-align: center;
  width:1000px;
}
@media (max-width:550px){
  .box{
    margin: 200px auto;
    width: 320px;
  }
  .pickertime{
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
